<template>
    <el-dialog v-model="cacheSetVisible" class="layer-cache-set-dialog" title="切片设置" width="700px" draggable>
        <div class="cachset-header">
            <el-button @click="initLayerCacheTasks"> 刷新 </el-button>
            <el-button @click="sendLayerCacheTask('seed')"> 切片 </el-button>
            <el-button @click="sendLayerCacheTask('reseed')"> 重新切片 </el-button>
            <el-button @click="sendLayerCacheTask('truncate')"> 清空切片 </el-button>
            <el-button @click="closeLayerCacheTask"> 关闭当前任务 </el-button>
        </div>
        <div>
            <el-table ref="cacheTaskTableRef" :data="catchTaskTableData" style="width: 100%" class="cache-task-table">
                <!-- [tiles processed, total number of tiles to process, estimated remaining time (in seconds), Task ID, Task status] -->
                <el-table-column label="任务ID" prop="taskId"></el-table-column>
                <el-table-column label="已完成瓦片" prop="processed"></el-table-column>
                <el-table-column label="瓦片总数" prop="total"></el-table-column>
                <el-table-column label="剩余时间（秒）" prop="remainingTime"></el-table-column>

                <el-table-column label="任务状态">
                    <template #default="scope">
                        <span style="margin-left: 5px; font-size: 12px">{{
                            taskStatusNameHandler(scope.row.taskStatus)
                        }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, toRef, onBeforeMount, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useLayerEditModal } from '../hooks'
import { restHelperInstance } from '@/composables/useGeoHelper'
interface layerCacheTaskInfo {
    taskId: number
    processed: number
    total: number
    remainingTime: number
    taskStatus: number
}
const catchTaskTableData = ref<layerCacheTaskInfo[]>([])

const layerEditModal = useLayerEditModal()
const currentEditLayer = layerEditModal.currentEditLayer
//layerEditModal.currentEditLayer

const cacheSetVisible = layerEditModal.cacheSetVisible

/**
 * @description: 任务状态转换方法
 * @param {String} statusCode 状态码
 * @return {String}
 */
const taskStatusNameHandler = (statusCode: number) => {
    let statusName = ''
    switch (statusCode) {
        case -1:
            statusName = '失败'
            break
        case 0:
            statusName = '等待中'
            break
        case 1:
            statusName = '执行中'
            break
        case 2:
            statusName = '结束'
            break
    }
    return statusName
}
/**
 * @description: 初始化切片任务列表
 * @return {*}
 */
const initLayerCacheTasks = () => {
    const layerName = currentEditLayer.value!.name
        restHelperInstance.getLayerCacheTasksApi(layerName).then(res => {
        if (res) {
            if (res['long-array-array'].length > 0) {
                catchTaskTableData.value = res['long-array-array'].map((mapItem) => {
                  const tempData = mapItem as unknown as number[]
                    return {
                        taskId: tempData[3],
                        processed: tempData[0],
                        total: tempData[1],
                        remainingTime: tempData[2],
                        taskStatus: tempData[4],
                    }
                })
            } else {
                catchTaskTableData.value = []
            }
        }
    })
}

const sendLayerCacheTask = (operationType: string) => {
    const layerName = currentEditLayer.value!.name
        restHelperInstance.sendLayerCacheTaskApi({
          type: operationType,
          name:layerName,
          zoomStart: 0,
          zoomStop: 15,
          threadCount: 3,
        }).then(res => {
          ElMessage({
                type: 'success',
                message: '切片任务发起成功',
            })
            initLayerCacheTasks()
      })
}
const closeLayerCacheTask = () => {
    const layerName = currentEditLayer.value!.name
        restHelperInstance.clostLayerCacheTaskApi(layerName).then(res => {
          ElMessage({
                type: 'success',
                message: '切片任务关闭成功',
            })
            initLayerCacheTasks()
      })
}
// watch(
//     () => cacheSetVisible.value,
//     () => {
//         if (currentEditLayer.value) {
//             zoomToLayer(viewRef, currentEditLayer.value)
//         }
//     },
//     {
//         immediate: true,
//     },
// )
watch(
    () => cacheSetVisible.value,
    val => {
        if (val) {
            initLayerCacheTasks()
        }
    },
)

onBeforeMount(() => {})
</script>
<style lang="scss" scoped>
.el-dialog{
  .el-dialog__body {
    padding: 20px;
  }
}
.cachset-header {
    width: 100%;
    height: 50px;
}
.cache-task-table {
    min-height: 300px;
}
</style>
<style lang="scss">
.layer-cache-set-dialog{
  .el-dialog__body {
    padding: 20px;
  }
  .cachset-header {
      width: 100%;
      height: 50px;
  }
  .cache-task-table {
      min-height: 300px;
  }
}
</style>
